@use 'sass:map';
@use 'sass:math';
@use 'element-plus/theme-chalk/src/mixins/function.scss' as el;
@use 'element-plus/theme-chalk/src/common/var.scss' as *;
@use '_config.scss' as *;

//
// 获取element-plus的var
//
// @param $args 字符串名称
//
@function getElVar($names...) {
  @return el.getCssVar($names...);
}

//
// 生成element-plus的css var名称
//
// @param $name 名称
//
@function makeElVar($names...) {
  @return el.getCssVarName($names...);
}

//
// 获取element-plus的命名空间类名
//
// @param $name 类名
//
@function getElClass($names...) {
  @return joinElNames($names...);
}

//
// 获取应用内的css变量值
//
// @param $args 字符串名称
//
@function getAppVar($args...) {
  @return var(#{makeAppVar($args...)});
}

//
// 生成应用的css var名称
//
// @param $args 字符串名称
//
@function makeAppVar($args...) {
  @return --#{joinAppNames($args...)};
}

//
// 获取应用的类名
//
// @param $names 字符串名称
//
@function getAppClass($names...) {
  @return joinAppNames($names...);
}

//
// 将数组转成带应用命名空间的名称
//
// @param $name 字符串名称
//
@function joinAppNames($names...) {
  $args: join($appNamespace, $names);
  @return joinNames($args);
}

//
// 将数组转成带element plus命名空间的名称
//
// @param $name 字符串名称
//
@function joinElNames($names...) {
  $args: join($elNamespace, $names);
  @return joinNames($args);
}

//
// 将数组转成$sep分割的字符串
//
// @param $list 字符串数组
// @param $sep 分隔符，默认'-'
//
@function joinNames($list, $sep: '-') {
  $name: '';

  @each $item in $list {
    @if $item != '' {
      $name: if($name== '', $item, $name + $sep + $item);
    }
  }

  @return $name;
}

@mixin mix-color($type, $mode, $number, $numberLabel, $mix-color) {
  #{makeElVar(color-#{$type}-#{$mode}-#{$numberLabel})
}: mix(
    $mix-color,
    map.get($colors, $type, 'base'),
    math.percentage(math.div($number, 10))
  );
}

// ******** gap-map ******** //
$gap-map: (
  tg: 0px,
  sm-extra: 4px,
  sm: 8px,
  default: 16px,
  md: 24px,
  lg: 32px,
  lg-extra: 40px,
);

$color-map: (
  primary: getElVar(color-primary),
  info: getElVar(color-info),
  success: getElVar(color-success),
  warning: getElVar(color-warning),
  danger: getElVar(color-danger),
  error: getElVar(color-error),
);

$text-color-map: (
  primary: getElVar(text-color-primary),
  regular: getElVar(text-color-regular),
  secondary: getElVar(text-color-secondary),
  placeholder: getElVar(text-color-placeholder),
  disabled: getElVar(text-color-disabled),
);

//
// 文本移除省略号
//
%ellipse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//
// 清除浮动
//
%clearfix {
  &:after {
    content: '';
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
  }
}

//
// flex剧中定位
//
%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
